<template>
  <div class="users">
    <div class="header">
      <h2>分类管理</h2>
      <div class="header-actions">
        <!-- 添加 -->
        <el-button type="primary" @click="addshow=true">添加分类</el-button>
      </div>
    </div>
    
   

<el-table :data="list"  stripe>
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="classify_name" label="分类名称" min-width="80px"></el-table-column>   
  <el-table-column prop="classify_icon" label="分别类图标" min-width="80px">
    <template #default="scope">
      <el-avatar :src="scope.row.classify_icon" />
    </template>
  </el-table-column>        
  <el-table-column  label="操作" width="150px">
    <template #default="scope">
      
      <el-button type="danger"  size="small"  @click="delList(scope.row.id)">删除</el-button>
    </template>
  </el-table-column>
</el-table>


 <!-- 分页区域 -->
 <el-pagination
    background
    :page-size="size"
    :pager-count="11"
    layout="prev, pager, next"
    :total="total"
    @current-change="change"
  />


  <!-- 添加 -->
  <el-dialog v-model="addshow" title="添加" width="1000" @close="addclose">
      <el-form :model="Info">
        <el-form-item label="分类名" label-width="140px">
          <el-input v-model="Info.classify" autocomplete="off" style="width: 45%;" />
        </el-form-item>
        <!-- 上传图标 -->
        <el-form-item label="分类图标" label-width="140px">
          <input type="file" @change="upload" style="width: 45%;" />
          
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addshow = false">取消</el-button>
          <el-button type="primary" @click="addInfo" >
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template> 

<script setup lang="ts">
import {ref} from 'vue'
import {getlist,deleteList,gettotal,addlist,uploadimg} from '../api/classify.js'
import  { ElMessage } from 'element-plus'
const list = ref([
  
])
//分页
let count = ref(1)
//条数
let size = ref(10)
let total = ref(100)
function change(value: number){
  count.value = value
  Getlist()
}
//获取总数
const totals = async()=>{
  const {data:res}= await gettotal('gettotal')
  total.value = res.total
}
totals()
//获取列表
const Getlist = async ()=>{
  const {data:res} = await getlist(`getlist/${count.value}`)
  if(res.data.code != 200) return
  
  list.value = res.data.list
}

//删除
const delList = async (id:number)=>{
  const {data:res} = await deleteList(`delete/${id}`)
  console.log(res)
  if(res.data.code != 200) return ElMessage.error('删除失败')
  ElMessage.success('删除成功')
  Getlist()
}

//添加
const addshow = ref(false)
const Info = ref({
  classify:'',
  classify_icon:''
})
const addInfo = async ()=>{
  if(Info.value.classify == '' || Info.value.classify_icon == '') return ElMessage.error('请填写完整')
  const formdata = new FormData()
  formdata.append('uploadFile',Info.value.classify_icon)
  const config = {
    headers:{
      'Content-Type':'multipart/form-data'
    }
  }
  const {data:res} = await uploadimg(formdata,config)

  if(res.data.code != 200) return ElMessage.error('上传失败')
  Info.value.classify_icon = res.data.data
  const {data:res2} = await addlist('add',Info.value)
  console.log(res2)
  if(res2.data.code != 200) return ElMessage.error('添加失败')
  ElMessage.success('添加成功')
  Getlist()
  addclose()
  addshow.value = false
}
const addclose = ()=>{
  Info.value.classify = ''
  Info.value.classify_icon = ''
}

const upload = (e:any)=>{
  console.log(e.target.files[0])
  Info.value.classify_icon = e.target.files[0]
}


Getlist()
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>